---
sidebar_position: 4
title: 任务执行步骤组件
---

import tmpl from "!!raw-loader!@site/src/components/creating/index.js";
import CreatingTasksTmpl from "!!raw-loader!@site/src/components/creating/CreatingTasks.js";
import CreatingSuccessTmpl from "!!raw-loader!@site/src/components/creating/CreatingSuccess.js";
import CreatingErrorTmpl from "!!raw-loader!@site/src/components/creating/CreatingError.js";
import CreatingError2Tmpl from "!!raw-loader!@site/src/components/creating/CreatingError2.js";
import CreatingDownTmpl from "!!raw-loader!@site/src/components/creating/CreatingDown.js";

# 任务执行步骤

## 安装

```bash
  npm install @serverless-cd/creating-ui
```

## 示例

<CodeBase codeSource={tmpl}>
  <CreatingDemo />
</CodeBase>

## Apis

| 参数                | 说明                                                          | 类型                  | 必填 | 可选值 | 默认值 |
| :------------------ | :------------------------------------------------------------ | :-------------------- | :--- | :----- | :----- | ---- |
| dataSource          | 需要执行任务的值                                              | [Request](#request)[] | 是   |        | []     |
| onComplete          | 所有任务执行完成后触发该方法                                  | (content) => void     | 否   |        |        |
| onError             | 任务执行失败时触发该方法                                      | (content) => void     | 否   |        |        |
| countdown           | 任务执行完成后显示的倒计时间                                  | number                | 否   |        |        |
| showRetry           | 是否显示重试 icon                                             | boolean               | 否   |        |        | true |
| onCountdownComplete | 倒计时间结束后触发该方法                                      | () => void            | 否   |        |        |
| ref                 | 可通过 ref 拿到组件内部 onRetry 方法[示例](#外部调用重试事件) | any                   | 否   |        |        | true |

### Request

| 参数       | 说明               | 类型                  | 必填 | 可选值 | 默认值 |
| :--------- | :----------------- | :-------------------- | :--- | :----- | :----- |
| title      | 任务标题           | string                | 是   |        |        |
| key        | 当前任务的唯一值   | string                | 是   |        |        |
| errorMsg   | 任务执行失败的文案 | string                | 否   |        |        |
| successMsg | 任务执行成功的文案 | string                | 否   |        |        |
| runningMsg | 任务执行中的文案   | string                | 否   |        |        |
| tasks      | 可配置子任务列表   | [Request](#request)[] | 否   |        | []     |
| run        | 执行任务的方法     | ({content}) => void   | 否   |        |        |

### content

content 执行过的任务返回值 收集并以 'key' : 'value' 的形式整合

#### 示例

| 参数 | 说明           | 类型                    |
| :--- | :------------- | :---------------------- |
| key  | 任务的唯一标识 | object: [value](#value) |

#### value

| 参数    | 说明           | 类型    |
| :------ | :------------- | :------ |
| result  | 任务返回值     | any     |
| success | 任务执行的状态 | boolean |

## 更多用法

### 配置子任务

<CodeBase codeSource={CreatingTasksTmpl}>
  <CreatingTasks />
</CodeBase>

### onComplete 事件

<CodeBase codeSource={CreatingSuccessTmpl}>
  <CreatingSuccess />
</CodeBase>

### onError 事件

<CodeBase codeSource={CreatingErrorTmpl}>
  <CreatingError />
</CodeBase>

### 外部调用重试事件

<CodeBase codeSource={CreatingError2Tmpl}>
  <CreatingError2 />
</CodeBase>

### 倒计时示例

<CodeBase codeSource={CreatingDownTmpl}>
  <CreatingDown />
</CodeBase>
